<template>
  <div class="redar-img">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      ref="svg"
      version="1.1"
      viewbox="0 0 150 172"
      :style="{
        transform: 'scale(' + zoom + ')',
      }"
    >
      <polygon
        id="poy1"
        class="bg"
        points="75,1 149,44 149,128 75,171 1,128 1,44"
      ></polygon>
      <polygon
        id="poy2"
        class="bg"
        points="75,18 134.20000000000002,52.4 134.20000000000002,119.6 75,154 15.79999999999999,119.6 15.79999999999999,52.4"
      ></polygon>
      <polygon
        id="poy3"
        class="bg"
        points="75,35 119.4,60.8 119.4,111.2 75,137 30.6,111.2 30.6,60.8"
      ></polygon>
      <polygon
        id="poy4"
        class="bg"
        points="75,52 104.60000000000001,69.2 104.60000000000001,102.8 75,120 45.39999999999999,102.8 45.39999999999999,69.2"
      ></polygon>
      <polygon
        id="poy5"
        class="bg"
        points="75,69 89.8,77.6 89.8,94.4 75,103 60.199999999999996,94.4 60.199999999999996,77.6"
      ></polygon>
      <line x1="75" y1="1" x2="75" y2="171" class="bg" />
      <line x1="1" y1="44" x2="149" y2="128" class="bg" />
      <line x1="1" y1="128" x2="149" y2="44" class="bg" />
      <polygon id="score" class="score" />
    </svg>
  </div>
</template>

<script>
const geometric = require("geometric");
export default {
  name: "RadarImg",
  props: {
    score: {
      type: Object,
      default: () => {
        return {
          A: 90,
          B: 90,
          C: 90,
          D: 90,
          E: 90,
          F: 90,
        };
      },
    },
  },
  watch: {
    score() {
      this.getScorePolygon();
    },
  },
  data() {
    return {
      w: 148,
      h: 170,
      c: 84,
      b: 43,
      poy: [],
      zoom: 1,
    };
  },
  created() {
    this.poy = [
      [this.w / 2 + 1, 0 + 1],
      [this.w + 1, this.b + 1],
      [this.w + 1, this.b + this.c + 1],
      [this.w / 2 + 1, this.h + 1],
      [0 + 1, this.b + this.c + 1],
      [0 + 1, this.b + 1],
    ];
  },
  mounted() {
    this.resize();
    window.addEventListener("resize", this.resize, false);
    this.getScorePolygon();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resize);
  },
  methods: {
    resize() {
      this.zoom = this.$el.clientWidth / 150;
    },
    getScorePolygon() {
      let svg = this.$refs.svg;
      let svg_score = svg.getElementById("score");
      let { A = 90, B = 90, C = 90, D = 90, E = 90, F = 90 } = this.score;

      let pointA = geometric.polygonScale(this.poy, A / 100)[0];
      let pointB = geometric.polygonScale(this.poy, B / 100)[1];
      let pointC = geometric.polygonScale(this.poy, C / 100)[2];
      let pointD = geometric.polygonScale(this.poy, D / 100)[3];
      let pointE = geometric.polygonScale(this.poy, E / 100)[4];
      let pointF = geometric.polygonScale(this.poy, F / 100)[5];

      let score_point = [pointA, pointB, pointC, pointD, pointE, pointF];
      svg_score.setAttribute(
        "points",
        score_point.map((point) => point.join(",")).join(" ")
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.redar-img {
  width: 1.5rem;
  height: 1.72rem;
  margin: 0 0.1rem 0 0.03rem;
  svg {
    width: 150px;
    height: 172px;
    transform-origin: 0 0;
    .bg {
      fill: transparent;
      stroke: #e9e9e9;
      stroke-width: 1;
    }
    .score {
      fill: rgba(91, 144, 249, 0.25);
      stroke: #1890ff;
      stroke-width: 2;
    }
  }
}
</style>
